<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="cluster-nodes">
  <div class="header-part">
    <h1>{{appUtilsService.isDistributed ? ('common_cluster_monitor_label' | i18n) : ('common_node_monitor_label' | i18n)}}</h1>
    <lv-select
      [lvOptions]="clusterOps"
      [(ngModel)]="selected"
      lvValueKey="value"
      (ngModelChange)="changeCluster($event)"
      *ngIf="isAllCluster"
    ></lv-select>
  </div>
  <lv-group lvGutter="20px">
    <ng-container *ngIf="clusterNodes.length > maxClusterNodeShow">
      <i
        lv-icon="lv-icon-arrow-prev"
        class="arrow-icon"

        lvColorState="true"
        (click)="prev()"
      ></i>
    </ng-container>
    <!-- 节点列表 -->
    <lv-radio-group
      #group
      [(ngModel)]="selectedNode"
      [lvGroupName]="'group'"
      (ngModelChange)="NodeChanged($event)"
    >
      <lv-group [lvGutter]="'24px'">
        <ng-container *ngFor="let item of showNodeItems">
          <lv-radio
            [lvViewType]="'custom'"
            [lvValue]="item.remoteEsn"
            [lvDisabled]="item.status !== dataMap.Cluster_Status.online.value"
          >
            <div
              class="cluster-card"
              [ngClass]="{
                'cluster-card-selected': group.isChecked(item.remoteEsn)
              }"
            >
              <lv-group class="cluster-card-gruop" lvGutter="14px">
                <img
                  *ngIf="item.status === 27"
                  src="assets/img/multi_online_node.png"
                  class="cluster-icon"
                />
                <img
                  *ngIf="item.status !== 27"
                  src="assets/img/multi_offline_node.png"
                  class="cluster-icon"
                />
                <div class="cluster-info">
                  <lv-group lvDirection="vertical">
                    <span class="cluster-name" lv-overflow>
                      {{ item.clusterName | nil }}
                    </span>
                    <div class="capacity-info" lv-overflow>
                      <div class="size-percent">
                        {{
                          item.usedCapacity
                            | capacityCalculateLabel: '1.1-3':unitconst.KB:true
                        }}/{{
                          item.totalCapacity
                            | capacityCalculateLabel: '1.1-3':unitconst.KB:true
                        }}
                      </div>
                    </div>
                  </lv-group>
                </div>
              </lv-group>
            </div>
          </lv-radio>
        </ng-container>
      </lv-group>
    </lv-radio-group>
    <ng-container *ngIf="clusterNodes.length > maxClusterNodeShow">
      <i
        lv-icon="lv-icon-arrow-next"
        class="arrow-icon"

        lvColorState="true"
        (click)="next()"
      ></i>
    </ng-container>
  </lv-group>
</div>
